<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: url('image/img.png') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        form {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transform: scale(1.2);
            text-align: center; /* 居中文本 */
        }

        input {
            margin-bottom: 10px;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
            border-radius: 25px;

            background-color: rgba(255, 255, 255, 0.2);
            background-size: 32px;
            background-repeat: no-repeat;
        }

        #btn {
            background-color: #af4c81;
            color: #fff;
            cursor: pointer;

            margin-top: 10px; /* 调整按钮上边距 */
            margin-bottom: 20px; /* 调整按钮下边距 */
        }


        #result {
            margin-top: 10px;
            color: #333;
        }

        #links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        a {
            text-decoration: none;
            color: #333;
            margin-bottom: 9000px;
        }

        #forgot-password {
            margin-right: 100px; /* 增加右边距 */
        }

        #register {
            margin-left: 10px; /* 增加左边距 */
        }
        #welcome {
            font-size: 24px; /* 增加字体大小，你可以根据需要调整 */
            color:  #AF4C81FF; /* 将 "WELCOME" 文本颜色改为蓝色 */

        }
        #username {
            color: blue; /* 将用户名输入框文本颜色改为蓝色 */
            text-align: center; /* 居中文本 */
            background-image: url('../image/img_1.png');


        }
        #password {
            color: blue; /* 将用户名输入框文本颜色改为蓝色 */
            text-align: center; /* 居中文本 */
            background-image: url('../image/img_2.png');
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
    <label for="username" id="welcome">CRM管理系统</label>
    <input type="text" id="username" name="uname" placeholder="账号" required><br>


    <input type="password" id="password" name="upwd"  placeholder="密码" required><br>



    <input type="button" value="立即登录" id="btn">
    <a href="#" id="forgot-password" style="color: aquamarine">忘记密码？</a>
    <a href="#" id="register" style="color: aquamarine">快速注册</a>
</form>

<!--<form action="/login" method="post">-->
<!--    <div>-->
<!--        <label>用户名:</label>-->
<!--        <input type="text" name="username"/>-->
<!--    </div>-->
<!--    <div>-->
<!--        <label>密码:</label>-->
<!--        <input type="password" name="password">-->
<!--    </div>-->
<!--    <div>-->
<!--        <button type="submit">提交</button>-->
<!--    </div>-->
<!--</form>-->


<div id="result"></div>
<script>
    $('#btn').click(function(){
        var username = $('#username').val();
        var password = $('#password').val();
        $.ajax({
            url: '/api/user/login', // 后端控制器路由地址
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({ userName: username, userPwd: password}),
            success: function(response) {
                // 处理返回的JSON数据
                alert("返回的数据："+response.code)
                console.log(response)
                if (response.code===200) {
                    // alert(response)
                    window.location.href="/api/register.html"
                    // $('#result').html('<p>登录成功！</p>');
                    // window.location.href="/"
                } else {
                    $('#result').html('登录失败');
                    // $('#result').html('<p>登录失败：' + response.message + '</p>');
                }
            },
            error: function(xhr, status, error) {
                console.log('Error occurred: ' + error);
            }
        });

    })
</script>
</body>
</html>